<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        fixed
        placeholder
        safe-area-inset-top
        title="邀请好友"
        left-arrow
        @click-left="back"
      />
    </div>
    <div class="bgImg">
      <img src="../../assets/invitation.png" alt="" width="100%" />
      <div class="face">
        <span @click="goEr">面对面邀请</span>
        <van-icon name="arrow" size="10" />
      </div>
      <img class="img" src="@/assets/button.png" alt="" @click="goShare"/>
      <button class="btn" @click="goRule">活动规则</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    goRule(){
      this.$router.push("/rule");
    },
    goEr(){
      this.$router.push("/QRCode")
    },
    goShare(){
      this.$router.push("/share")
    }
  },
};
</script>

<style lang="less" scoped>
.bgImg {
  position: relative;
  .face {
    position: absolute;
    bottom: 10%;
    left: 50%;
    margin-left: -10%;
    color: white;
    font-size: 15px;
    span {
      margin-left: 3px;
      margin-right: 2px;
    }
  }
}
.img {
  width: 88%;
  position: absolute;
  bottom: 25px;
  left: 5%;
}
.btn{
  background-image: linear-gradient(#fcc40edc ,#fdc731);
  border: 0;
  font-size: 15px;
  color: rgb(255, 0, 0);
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 100px;
  width: 25%;
  padding: 5px;
  border-radius: 25px;
  box-shadow: 2px 2px 2px #ee5040;
}
</style>